<!DOCTYPE html>
<html lang="en">
    <head>
  <!-- 元数据 -->
  <meta charset="utf-8">
  <link rel="icon" href="https://gitee.com/cuishikang/tmp/raw/master/img/boke.png">
  <title>4. Vue移动端 频道关联文章列表 | 小崔的博客</title>
  <meta name="author" content="cuishikang" />
  <meta http-equiv="Cache-Control" content="no-transform" />
  <meta http-equiv="Cache-Control" content="no-siteapp" />
  <meta http-equiv="X-UA-Compatible" content="IE=edge" />
  <meta name="robots" content="index,follow" />
  <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1" />
  <meta name="format-detection" content="telphone=no, email=no" />
  
    <meta name="keywords" content="Vant, Vue, Vue移动端" />
  
  <meta name="description" content="::: tip 介绍 Vue首页布局 频道和列表关联 实现点击切换相应文章:::">
<meta property="og:type" content="article">
<meta property="og:title" content="4. Vue移动端 频道关联文章列表">
<meta property="og:url" content="https://cuishikang.gitee.io/2021/06/08/Vue_Mobile_Projects/5_Home/index.html">
<meta property="og:site_name" content="小崔的博客">
<meta property="og:description" content="::: tip 介绍 Vue首页布局 频道和列表关联 实现点击切换相应文章:::">
<meta property="og:locale" content="en_US">
<meta property="og:image" content="https://gitee.com/cuishikang/tmp/raw/master/img/boke.png">
<meta property="article:published_time" content="2021-06-07T16:00:00.000Z">
<meta property="article:modified_time" content="2022-02-19T10:22:58.546Z">
<meta property="article:author" content="cuishikang">
<meta property="article:tag" content="Vue">
<meta property="article:tag" content="Vue移动端">
<meta property="article:tag" content="Vant">
<meta name="twitter:card" content="summary">
<meta name="twitter:image" content="https://gitee.com/cuishikang/tmp/raw/master/img/boke.png">
<meta name="twitter:site" content="@null">
  
  <!-- 站点验证相关 -->
  
    
    
    
  
  <!-- 样式表文件 -->
  <link rel="stylesheet" id="kratos-css" href="/css/kratosr.min.css" type="text/css" media="all">
  
    <link rel="stylesheet" id="highlight-css" href="/css/highlight/night-eighties.min.css" type="text/css" media="all">
  
  
  <link rel="stylesheet" id="fontawe-css" href="https://unpkg.com/font-awesome@4.7.0/css/font-awesome.min.css" type="text/css" media="all">
  <link rel="stylesheet" id="nprogress-css" href="https://unpkg.com/nprogress@0.2.0/nprogress.css" type="text/css" media="all">
  
  
    <link rel="stylesheet" href="https://unpkg.com/aplayer@1.10.1/dist/APlayer.min.css">
  
  
    <link rel="stylesheet" href="https://unpkg.com/@fancyapps/fancybox@3.5.7/dist/jquery.fancybox.min.css">
  
  
    <link rel="stylesheet" id="darkmode-css" href="/css/kr-dark.min.css" type="text/css" media="all">
  
  <!-- 不得不预先加载的一些JS文件 -->
  <script src="https://unpkg.com/jquery@3.6.0/dist/jquery.min.js"></script>
  
    <script src="https://unpkg.com/qrcode_js@1.0.0/qrcode.min.js"></script>
  
  
  <style>
    
      .kratos-cover.kratos-cover-2 {
        background-image: url('/images/banner.webp');
      }
    
    
      @media(min-width:768px) {
        body.custom-background {
          background-image: url('/images/bg.webp');
        }
      }
    
  </style>
  
<meta name="generator" content="Hexo 6.0.0"></head>


    <body class="custom-background">
        <div id="kratos-wrapper">
    <div id="kratos-page">
        <div id="kratos-header">
            <header id="kratos-desktop-topnav" class="kratos-topnav">
                <div class="container">
                    <div class="nav-header">
                        <nav id="kratos-menu-wrap">
                            <ul id="kratos-primary-menu" class="sf-menu">
                                
                                    
                                        <li><a href="/"><i class="fa fa-home"></i>首页</a></li>
                                    
                                
                                    
                                        <li><a href="/archives/"><i class="fa fa-file"></i>档案馆</a></li>
                                    
                                
                                    
                                        <li><a href="/friends/"><i class="fa fa-paw"></i>好伙伴</a></li>
                                    
                                
                                    
                                        <li>
                                            <a><i class="fa fa-link"></i>关于本人</a>
                                            <ul class="sub-menu">
                                                
                                                    
                                                
                                                    
                                                        <li><a target="_blank" rel="noopener" href="https://gitee.com/cuishikang"><i class="fa fa-git"></i>码云</a></li>
                                                    
                                                
                                                    
                                                        <li><a target="_blank" rel="noopener" href="https://gitee.com/cuishikang/tmp/raw/master/img/2201645358312_.pic.jpg"><i class="fa fa-weixin"></i>微信</a></li>
                                                    
                                                
                                                    
                                                        <li><a target="_blank" rel="noopener" href="https://www.zhihu.com/people/fu-xi-ting-67-17-5"><i class="fa  fa-search"></i>知乎</a></li>
                                                    
                                                
                                                    
                                                        <li><a href="http://cuishikang.gitee.io/my_resume/#/"><i class="fa  fa-file-o"></i>简历</a></li>
                                                    
                                                
                                            </ul>
                                        </li>
                                    
                                
                            </ul>
                        </nav>
                    </div>
                </div>
            </header>
            <header id="kratos-mobile-topnav" class="kratos-topnav">
                <div class="container">
                    <div class="color-logo"><a href="/">小崔的博客</a></div>
                    <div class="nav-toggle">
                        <a class="kratos-nav-toggle js-kratos-nav-toggle">
                            <i></i>
                        </a>
                    </div>
                </div>
            </header>
        </div>
        <div class="kratos-start kratos-hero-2">
            <!-- <div class="kratos-overlay"></div> -->
            <div class="kratos-cover kratos-cover-2 text-center">
                <div class="desc desc2 animate-box">
                    <a href="/">
                        <h2>小崔的博客</h2> <br />
                        <span></span>
                    </a>
                </div>
            </div>
        </div>

        <div id="kratos-blog-post">
            <div class="container">
                <div id="main" class="row">
                    

        

            <section class="col-md-8">

        

            <article>
    <div class="kratos-hentry kratos-post-inner clearfix">
        <header class="kratos-entry-header">
            
                <h1 class="kratos-entry-title text-center">4. Vue移动端 频道关联文章列表</h1>
            
            
            <ul class="kratos-post-meta text-center">
                <li><i class="fa fa-calendar"></i> 2021-06-08</li>
                <li><i class="fa fa-user"></i> 作者 cuishikang</li>
                <li>
                    <i class="fa fa-edit"></i> 
                    
                    
                        ~25.66K
                    
                    字
                </li>
                
            </ul>
        </header>
        <div class="kratos-post-content">
            <div id="expire-alert" class="alert alert-warning hidden" role="alert">
                本文最后编辑于 <time datetime="1645266178546"></time> 前，其中的内容可能需要更新。
            </div>
            
            <hr />
            <p>::: tip 介绍</p>
<p>Vue首页布局 频道和列表关联 实现点击切换相应文章<br><br>:::</p>
<span id="more"></span>

<h2 id="首页频道基本布局-main-vue"><a href="#首页频道基本布局-main-vue" class="headerlink" title="首页频道基本布局 main.vue"></a>首页频道基本布局 <code>main.vue</code></h2><blockquote>
<p>目标：基于vant组件实现频道效果布局</p>
</blockquote>
<ul>
<li><code>main文件夹下的 main.Vue文件</code></li>
</ul>
<blockquote>
<p>基本结构 template</p>
</blockquote>
<figure class="highlight plaintext"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br></pre></td><td class="code"><pre><span class="line">&lt;template&gt;</span><br><span class="line">  &lt;div class=&quot;main&quot;&gt;</span><br><span class="line">    &lt;!-- v-model=&quot;active&quot;是控制默认选择 在data()&#123;&#125;里面控制 --&gt;</span><br><span class="line">    &lt;van-tabs v-model=&quot;active&quot; swipeable&gt;</span><br><span class="line">      &lt;van-tab :key=&quot;index&quot; v-for=&quot;index in 8&quot; :title=&quot;&#x27;标签 &#x27; + index&quot;&gt;</span><br><span class="line">        &lt;div class=&quot;scroll-wrapper&quot;&gt;</span><br><span class="line">          &lt;van-cell v-for=&quot;item in 20&quot; :key=&quot;item&quot;&gt;&#123;&#123;index + &#x27;-&#x27; + item&#125;&#125;&lt;/van-cell&gt;</span><br><span class="line">        &lt;/div&gt;</span><br><span class="line">      &lt;/van-tab&gt;</span><br><span class="line">    &lt;/van-tabs&gt;</span><br><span class="line">    &lt;span class=&quot;bar_btn&quot;&gt;</span><br><span class="line">      &lt;van-icon name=&quot;wap-nav&quot;&gt;&lt;/van-icon&gt;</span><br><span class="line">    &lt;/span&gt;</span><br><span class="line">  &lt;/div&gt;</span><br><span class="line">&lt;/template&gt;</span><br><span class="line">&lt;script&gt;</span><br></pre></td></tr></table></figure>

<blockquote>
<p>样式处理 style</p>
</blockquote>
<figure class="highlight less"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br><span class="line">34</span><br><span class="line">35</span><br><span class="line">36</span><br><span class="line">37</span><br><span class="line">38</span><br><span class="line">39</span><br><span class="line">40</span><br><span class="line">41</span><br><span class="line">42</span><br><span class="line">43</span><br><span class="line">44</span><br><span class="line">45</span><br><span class="line">46</span><br><span class="line">47</span><br><span class="line">48</span><br><span class="line">49</span><br><span class="line">50</span><br><span class="line">51</span><br><span class="line">52</span><br><span class="line">53</span><br><span class="line">54</span><br><span class="line">55</span><br><span class="line">56</span><br><span class="line">57</span><br><span class="line">58</span><br><span class="line">59</span><br><span class="line">60</span><br><span class="line">61</span><br></pre></td><td class="code"><pre><span class="line">&lt;<span class="selector-tag">style</span> <span class="selector-tag">lang</span>=&quot;<span class="selector-tag">less</span>&quot; <span class="selector-tag">scoped</span>&gt;</span><br><span class="line"><span class="selector-class">.main</span> &#123;</span><br><span class="line">  <span class="attribute">height</span>: <span class="number">100%</span>;</span><br><span class="line">  <span class="selector-class">.van-tabs</span> &#123;</span><br><span class="line">    <span class="attribute">height</span>: <span class="number">100%</span>;</span><br><span class="line">    <span class="attribute">display</span>: flex;</span><br><span class="line">    <span class="attribute">flex-direction</span>: column;</span><br><span class="line">    /<span class="selector-tag">deep</span>/ <span class="selector-class">.van-tabs__wrap</span> &#123;</span><br><span class="line">      <span class="attribute">height</span>: <span class="number">72px</span>;</span><br><span class="line">      <span class="attribute">padding-right</span>: <span class="number">72px</span>;</span><br><span class="line">      <span class="selector-class">.van-tab</span> &#123;</span><br><span class="line">        <span class="attribute">line-height</span>: <span class="number">72px</span>;</span><br><span class="line">      &#125;</span><br><span class="line">      <span class="selector-class">.van-tabs__line</span> &#123;</span><br><span class="line">        <span class="attribute">background-color</span>: <span class="number">#3296fa</span>;</span><br><span class="line">        <span class="attribute">height</span>: <span class="number">2px</span>;</span><br><span class="line">      &#125;</span><br><span class="line">    &#125;</span><br><span class="line">    <span class="comment">// 修改Vant插件样式 需要用到/deep/ 防止修改失败</span></span><br><span class="line">    /<span class="selector-tag">deep</span>/ <span class="selector-class">.van-tabs__content</span> &#123;</span><br><span class="line">      <span class="attribute">flex</span>: <span class="number">1</span>;</span><br><span class="line">      <span class="attribute">overflow</span>: hidden;</span><br><span class="line">      <span class="selector-class">.van-tab__pane</span> &#123;</span><br><span class="line">        <span class="attribute">height</span>: <span class="number">100%</span>;</span><br><span class="line">        <span class="selector-class">.scroll-wrapper</span> &#123;</span><br><span class="line">          <span class="attribute">height</span>: <span class="number">100%</span>;</span><br><span class="line">          <span class="attribute">overflow-y</span>: auto;</span><br><span class="line">        &#125;</span><br><span class="line">      &#125;</span><br><span class="line">    &#125;</span><br><span class="line">  &#125;</span><br><span class="line">  <span class="selector-class">.bar_btn</span> &#123;</span><br><span class="line">    <span class="attribute">width</span>: <span class="number">72px</span>;</span><br><span class="line">    <span class="attribute">height</span>: <span class="number">70px</span>;</span><br><span class="line">    <span class="attribute">position</span>: absolute;</span><br><span class="line">    <span class="attribute">top</span>: <span class="number">0</span>;</span><br><span class="line">    <span class="attribute">right</span>: <span class="number">0</span>;</span><br><span class="line">    <span class="selector-tag">&amp;</span><span class="selector-pseudo">::before</span> &#123;</span><br><span class="line">      <span class="attribute">content</span>: <span class="string">&#x27;&#x27;</span>;</span><br><span class="line">      <span class="attribute">width</span>: <span class="number">100%</span>;</span><br><span class="line">      <span class="attribute">height</span>: <span class="number">100%</span>;</span><br><span class="line">      <span class="attribute">position</span>: absolute;</span><br><span class="line">      <span class="attribute">z-index</span>: <span class="number">999</span>;</span><br><span class="line">      <span class="attribute">box-shadow</span>: <span class="number">0</span> <span class="number">0</span> <span class="number">10px</span> <span class="number">#999</span>;</span><br><span class="line">      <span class="attribute">transform</span>: scale(<span class="number">1</span>, <span class="number">0.6</span>);</span><br><span class="line">    &#125;</span><br><span class="line">    <span class="selector-class">.van-icon-wap-nav</span> &#123;</span><br><span class="line">      <span class="attribute">width</span>: <span class="number">100%</span>;</span><br><span class="line">      <span class="attribute">height</span>: <span class="number">100%</span>;</span><br><span class="line">      <span class="attribute">background</span>: <span class="number">#fff</span>;</span><br><span class="line">      <span class="attribute">text-align</span>: center;</span><br><span class="line">      <span class="attribute">line-height</span>: <span class="number">70px</span>;</span><br><span class="line">      <span class="attribute">position</span>: relative;</span><br><span class="line">      <span class="attribute">z-index</span>: <span class="number">1000</span>;</span><br><span class="line">      <span class="selector-tag">&amp;</span><span class="selector-pseudo">::before</span> &#123;</span><br><span class="line">        <span class="attribute">font-size</span>: <span class="number">40px</span>;</span><br><span class="line">      &#125;</span><br><span class="line">    &#125;</span><br><span class="line">  &#125;</span><br><span class="line">&#125;</span><br><span class="line">&lt;/<span class="selector-tag">style</span>&gt;</span><br></pre></td></tr></table></figure>

<ul>
<li><code>/deep/</code>  作用：<strong>父级样式影响到子级</strong><ul>
<li>&#x2F;deep&#x2F; 这个符号的作用由<a target="_blank" rel="noopener" href="https://vue-loader.vuejs.org/zh/guide/scoped-css.html">vue-loader</a>决定 </li>
<li>默认情况下，scoped模式的样式会自动编译类名 .a[data-v-f3f3eg9]</li>
<li>让父组件影响到子组件<ul>
<li>让子组件类名生效</li>
</ul>
</li>
<li><big>只要第三方组件提供的类名被覆盖 就在左侧添加&#x2F;deep&#x2F;(覆盖第三方样式 添加自己样式)</big></li>
</ul>
</li>
</ul>
<blockquote>
<p>van-tabs 和 van-tab 的关系</p>
<p>注意：如果希望覆盖第三方组件提供类名，需要添加&#x2F;deep&#x2F;（希望less的嵌套写法中，父组件的类名影响子组件的类名）</p>
</blockquote>
<h2 id="实现上拉下拉加载更新-main-vue"><a href="#实现上拉下拉加载更新-main-vue" class="headerlink" title="实现上拉下拉加载更新  main.vue"></a>实现上拉下拉加载更新  <code>main.vue</code></h2><p><a target="_blank" rel="noopener" href="https://vant-contrib.gitee.io/vant/#/zh-CN/list">上拉加载更新官方地址</a></p>
<blockquote>
<p>目标：基于vant组件实现上拉下拉效果</p>
</blockquote>
<p>需求：</p>
<ol>
<li>滚动到页面底部时，加载下一页数据 加载到一定数量 结束加载</li>
<li>滑动顶部 更新数据</li>
</ol>
<blockquote>
<p>基本结构 template</p>
</blockquote>
<ul>
<li><code>@refresh</code>是声明上拉方法 上滑触发刷新时候 执行方法 </li>
<li><code>@load</code>是声明下拉获取数据方法 当频道没有数据的时候 执行方法</li>
</ul>
<figure class="highlight plaintext"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br></pre></td><td class="code"><pre><span class="line">&lt;template&gt;</span><br><span class="line">  &lt;div class=&quot;main&quot;&gt;</span><br><span class="line">    &lt;!-- v-model=&quot;active&quot;是控制默认选择 在data()&#123;&#125;里面控制 --&gt;</span><br><span class="line">    &lt;van-tabs v-model=&quot;active&quot; swipeable&gt;</span><br><span class="line">      &lt;van-tab :key=&quot;index&quot; v-for=&quot;index in 8&quot; :title=&quot;&#x27;标签 &#x27; + index&quot;&gt;</span><br><span class="line">        &lt;div class=&quot;scroll-wrapper&quot;&gt;</span><br><span class="line">          &lt;!-- 添加 上拉菜单刷新 --&gt;</span><br><span class="line">          &lt;!--isLoading 是控制上拉的状态为 布尔控制 --&gt;</span><br><span class="line">          &lt;!-- @refresh是声明上拉方法 --&gt;</span><br><span class="line">          &lt;van-pull-refresh v-model=&quot;isLoading&quot; @refresh=&quot;onRefresh&quot; :success-text=&quot;pullText&quot;&gt;</span><br><span class="line">            &lt;!-- 添加 滑动下拉的数据 --&gt;</span><br><span class="line">            &lt;!-- :finished 是列表加载完成的标志 布尔控制 loading 是下拉状态为 布尔控制  --&gt;</span><br><span class="line">            &lt;!-- @load是声明下拉方法--&gt;</span><br><span class="line">            &lt;van-list v-model=&quot;loading&quot; :finished=&quot;finished&quot; finished-text=&quot;没有更多了&quot; @load=&quot;onLoad&quot;&gt;</span><br><span class="line">              &lt;!-- list是渲染到页面上的内容  --&gt;</span><br><span class="line">              &lt;van-cell v-for=&quot;item in list&quot; :key=&quot;item&quot; :title=&quot;item&quot; /&gt;</span><br><span class="line">            &lt;/van-list&gt;</span><br><span class="line">          &lt;/van-pull-refresh&gt;</span><br><span class="line">        &lt;/div&gt;</span><br><span class="line">      &lt;/van-tab&gt;</span><br><span class="line">    &lt;/van-tabs&gt;</span><br><span class="line">    &lt;span class=&quot;bar_btn&quot;&gt;</span><br><span class="line">      &lt;van-icon name=&quot;wap-nav&quot;&gt;&lt;/van-icon&gt;</span><br><span class="line">    &lt;/span&gt;</span><br><span class="line">  &lt;/div&gt;</span><br><span class="line">&lt;/template&gt;</span><br></pre></td></tr></table></figure>

<blockquote>
<p>脚本设置  scrpit </p>
</blockquote>
<ul>
<li><p>onLoad () 下拉菜单获取数据</p>
<ul>
<li><code>loading </code>加载的过程 会自动修改为true 但是渲染完毕后 需要手动修改false</li>
<li><code> finished</code> 加载的结束 设置指定数值 加载到一定数目结束加载 需要手动修改true</li>
</ul>
<p><big>下拉获取数据总结</big>：</p>
<ol>
<li>页面首次渲染列表时，自动触发onLoad函数，如果单次加载数据不够一屏，自动再次触发一次</li>
<li>单次加载列表数据时，loading状态位自动修改为true，本次数据加载完成后，需要手动修改为false,表示此次加载数据完成。</li>
<li>最后所有数据都加载成功了，需要把finished状态位修改为true，表示所有数据已经加载完成。</li>
</ol>
</li>
<li><p>onRefresh() 上拉菜单更新数据</p>
<ul>
<li><code>isLoading</code> 刷新的过程 会自动修改为true 但是渲染完毕后 需要手动修改false</li>
<li><code> finished</code> 加载的结束 设置指定数值 加载到一定数目结束加载 需要手动修改true</li>
<li><code> pullText</code> 设置刷新提示</li>
</ul>
<p><big>上拉刷新数据总结</big>：</p>
<ol>
<li>通过状态位isLoading控制下拉的完成的流程</li>
<li>更新完成数据后，为了防止出现不够一屏的情况，需要手动调用onLoad</li>
<li>下拉时需要清空列表数据</li>
</ol>
</li>
</ul>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br><span class="line">34</span><br><span class="line">35</span><br><span class="line">36</span><br><span class="line">37</span><br><span class="line">38</span><br><span class="line">39</span><br><span class="line">40</span><br><span class="line">41</span><br><span class="line">42</span><br><span class="line">43</span><br><span class="line">44</span><br><span class="line">45</span><br><span class="line">46</span><br><span class="line">47</span><br><span class="line">48</span><br><span class="line">49</span><br><span class="line">50</span><br><span class="line">51</span><br><span class="line">52</span><br><span class="line">53</span><br><span class="line">54</span><br><span class="line">55</span><br><span class="line">56</span><br><span class="line">57</span><br><span class="line">58</span><br><span class="line">59</span><br></pre></td><td class="code"><pre><span class="line">&lt;script&gt;</span><br><span class="line"><span class="keyword">export</span> <span class="keyword">default</span> &#123;</span><br><span class="line">  data () &#123;</span><br><span class="line">    <span class="keyword">return</span> &#123;</span><br><span class="line">      <span class="comment">// 控制Tab当前选中的条目</span></span><br><span class="line">      <span class="attr">active</span>: <span class="number">0</span>,</span><br><span class="line">      <span class="comment">// 下来获取数据状态位在(加载的过程 会自动修改为true 但是渲染完毕后 需要手动修改false)</span></span><br><span class="line">      <span class="attr">loading</span>: <span class="literal">false</span>,</span><br><span class="line">      <span class="comment">// 列表加载完成的标志 (加载的结束 设置指定数值 加载到一定数目结束加载 需要手动修改true)</span></span><br><span class="line">      <span class="attr">finished</span>: <span class="literal">false</span>,</span><br><span class="line">      <span class="comment">// 列表数据</span></span><br><span class="line">      <span class="attr">list</span>: [],</span><br><span class="line">      <span class="comment">// 上拉刷新状态位 (加载的过程 会自动修改为true 但是渲染完毕后 需要手动修改false)</span></span><br><span class="line">      <span class="attr">isLoading</span>: <span class="literal">false</span>, </span><br><span class="line">      <span class="comment">// 设置刷新提示</span></span><br><span class="line">      <span class="attr">pullText</span>: <span class="string">&#x27;刷新成功&#x27;</span></span><br><span class="line">    &#125;</span><br><span class="line">  &#125;,</span><br><span class="line">  <span class="attr">methods</span>: &#123;</span><br><span class="line">    <span class="comment">// 下拉时触发，加载最新的数据即可 (下滑到顶部执行)</span></span><br><span class="line">    onRefresh () &#123;</span><br><span class="line">      <span class="comment">// 加载一页新的数据</span></span><br><span class="line">      <span class="built_in">setTimeout</span>(<span class="function">() =&gt;</span> &#123;</span><br><span class="line">        <span class="keyword">const</span> data = [<span class="number">1</span>, <span class="number">2</span>, <span class="number">3</span>, <span class="number">4</span>, <span class="number">5</span>]</span><br><span class="line">        <span class="keyword">if</span> (data.<span class="property">length</span> &gt; <span class="number">0</span>) &#123;</span><br><span class="line">          <span class="comment">// 有新的数据(先请空之前的数据，再放入最新的数据)</span></span><br><span class="line">          <span class="variable language_">this</span>.<span class="property">list</span> = []</span><br><span class="line">          <span class="variable language_">this</span>.<span class="property">list</span>.<span class="title function_">push</span>(...data)</span><br><span class="line">          <span class="comment">// 把列表加载结束的标志重置一下</span></span><br><span class="line">          <span class="variable language_">this</span>.<span class="property">finished</span> = <span class="literal">false</span></span><br><span class="line">          <span class="comment">// 手动加载一页数据(防止不够一页数据)</span></span><br><span class="line">          <span class="variable language_">this</span>.<span class="title function_">onLoad</span>()</span><br><span class="line">        &#125; <span class="keyword">else</span> &#123;</span><br><span class="line">          <span class="comment">// 没有新的数据提示</span></span><br><span class="line">          <span class="variable language_">this</span>.<span class="property">pullText</span> = <span class="string">&#x27;没有数据需要更新...&#x27;</span></span><br><span class="line">        &#125;</span><br><span class="line">        <span class="comment">// 通知下拉刷新的组件成功了</span></span><br><span class="line">        <span class="variable language_">this</span>.<span class="property">isLoading</span> = <span class="literal">false</span></span><br><span class="line">      &#125;, <span class="number">1000</span>)</span><br><span class="line">    &#125;,</span><br><span class="line">    <span class="comment">// 每次触发动态加载一页新的数据（上滑到底部时触发）</span></span><br><span class="line">    onLoad () &#123;</span><br><span class="line">      <span class="comment">// 模拟异步操作</span></span><br><span class="line">      <span class="built_in">setTimeout</span>(<span class="function">() =&gt;</span> &#123;</span><br><span class="line">        <span class="comment">// 加载一页新的数据</span></span><br><span class="line">        <span class="keyword">for</span> (<span class="keyword">let</span> i = <span class="number">0</span>; i &lt; <span class="number">10</span>; i++) &#123;</span><br><span class="line">          <span class="variable language_">this</span>.<span class="property">list</span>.<span class="title function_">push</span>(<span class="variable language_">this</span>.<span class="property">list</span>.<span class="property">length</span> + <span class="number">1</span>)</span><br><span class="line">        &#125;</span><br><span class="line">        <span class="comment">// 告诉列表组件本次数据已经完成加载</span></span><br><span class="line">        <span class="variable language_">this</span>.<span class="property">loading</span> = <span class="literal">false</span></span><br><span class="line">        <span class="comment">// 如果加载完成后，需要告诉list组件</span></span><br><span class="line">        <span class="keyword">if</span> (<span class="variable language_">this</span>.<span class="property">list</span>.<span class="property">length</span> &gt;= <span class="number">50</span>) &#123;</span><br><span class="line">          <span class="comment">// 加载结束(不改成true 加载不会结束 会一直加载)</span></span><br><span class="line">          <span class="variable language_">this</span>.<span class="property">finished</span> = <span class="literal">true</span></span><br><span class="line">        &#125;</span><br><span class="line">      &#125;, <span class="number">1000</span>)</span><br><span class="line">    &#125;</span><br><span class="line">  &#125;</span><br><span class="line">&lt;/script&gt;</span><br></pre></td></tr></table></figure>

<p><big>下拉获取数据总结：</big></p>
<ol>
<li>页面首次渲染列表时，自动触发onLoad函数，如果单次加载数据不够一屏，自动再次触发一次</li>
<li>单次加载列表数据时，loading状态位自动修改为true，本次数据加载完成后，需要手动修改为false,表示此次加载数据完成。</li>
<li>最后所有数据都加载成功了，需要把finished状态位修改为true，表示所有数据已经加载完成。</li>
</ol>
<p><big>上拉刷新数据总结： </big></p>
<ol>
<li>通过状态位isLoading控制下拉的完成的流程</li>
<li>更新完成数据后，为了防止出现不够一屏的情况，需要手动调用onLoad</li>
<li>下拉时需要清空列表数据</li>
</ol>
<h2 id="设置函数节流-main-vue"><a href="#设置函数节流-main-vue" class="headerlink" title="设置函数节流  main.vue"></a>设置函数节流  <code>main.vue</code></h2><blockquote>
<p>目的: 防止用户多次刷新 出现bug</p>
<p>作用: 在固定的时间内（1秒），无论触发多少次条件（onLoad触发一次），仅仅执行一次任务（加载一页数据）</p>
</blockquote>
<p> 函数节流: 固定的时间内 无论触发多少次条件 都只会进行一次 直到条件结束 </p>
<p>节流原理: 设置一个对象 默认为false 如果第一次执行方法 先让其编程true 等代码执行完毕后 再恢复false 判断是否为true 如果是return跳出 防止多次刷新</p>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br><span class="line">34</span><br><span class="line">35</span><br><span class="line">36</span><br><span class="line">37</span><br><span class="line">38</span><br><span class="line">39</span><br><span class="line">40</span><br><span class="line">41</span><br><span class="line">42</span><br><span class="line">43</span><br><span class="line">44</span><br><span class="line">45</span><br><span class="line">46</span><br></pre></td><td class="code"><pre><span class="line">&lt;script&gt;</span><br><span class="line"><span class="comment">// ? 导入不同用户的频道数据</span></span><br><span class="line"><span class="keyword">import</span> &#123; getAllChannels &#125; <span class="keyword">from</span> <span class="string">&#x27;../../api/channel&#x27;</span></span><br><span class="line"><span class="keyword">export</span> <span class="keyword">default</span> &#123;</span><br><span class="line">  data () &#123;</span><br><span class="line">    <span class="keyword">return</span> &#123;</span><br><span class="line">      <span class="comment">// 控制Tab当前选中的条目</span></span><br><span class="line">      <span class="attr">active</span>: <span class="number">0</span>,</span><br><span class="line">      <span class="comment">// 列表数据加载过程的状态位(加载的过程 会自动修改为true 但是渲染完毕后 需要手动修改false)</span></span><br><span class="line">      <span class="attr">loading</span>: <span class="literal">false</span>,</span><br><span class="line">      <span class="comment">// 列表加载完成的标志(加载的结束 设置指定数值 加载到一定数目结束加载 需要手动修改true)</span></span><br><span class="line">      <span class="attr">finished</span>: <span class="literal">false</span>,</span><br><span class="line">      <span class="comment">// 列表数据</span></span><br><span class="line">      <span class="attr">list</span>: [],</span><br><span class="line">+      <span class="comment">// 设置函数节流</span></span><br><span class="line">+      <span class="attr">throttle</span>: <span class="literal">false</span></span><br><span class="line">    &#125;</span><br><span class="line">  &#125;,</span><br><span class="line">  <span class="attr">methods</span>: &#123;</span><br><span class="line"><span class="comment">// 每次触发动态加载一页新的数据（上滑到底部时触发）</span></span><br><span class="line">    onLoad () &#123;</span><br><span class="line">      <span class="comment">// 函数节流: 固定的时间内 无论触发多少次条件 都只会进行一次进入</span></span><br><span class="line">+ <span class="comment">// 原理: 设置一个对象 默认为false 如果第一次执行方法 先让其编程true 等代码执行完毕后 再恢复false 判断是否为true 如果是return跳出 防止多次刷新</span></span><br><span class="line">+       <span class="comment">// 启动函数节流: 如果 throttle为true 就让其跳出 不执行下面代码</span></span><br><span class="line">+       <span class="keyword">if</span> (<span class="variable language_">this</span>.<span class="property">throttle</span>) <span class="keyword">return</span></span><br><span class="line">+       <span class="comment">// 设置 throttle 为true 让其执行一次</span></span><br><span class="line">+       <span class="variable language_">this</span>.<span class="property">throttle</span> = <span class="literal">true</span></span><br><span class="line">      <span class="comment">// 模拟异步操作</span></span><br><span class="line">      <span class="built_in">setTimeout</span>(<span class="function">() =&gt;</span> &#123;</span><br><span class="line">        <span class="comment">// 加载一页新的数据</span></span><br><span class="line">        <span class="keyword">for</span> (<span class="keyword">let</span> i = <span class="number">0</span>; i &lt; <span class="number">10</span>; i++) &#123;</span><br><span class="line">          <span class="variable language_">this</span>.<span class="property">list</span>.<span class="title function_">push</span>(<span class="variable language_">this</span>.<span class="property">list</span>.<span class="property">length</span> + <span class="number">1</span>)</span><br><span class="line">        &#125;</span><br><span class="line">        <span class="comment">// 告诉列表组件本次数据已经完成加载</span></span><br><span class="line">        <span class="variable language_">this</span>.<span class="property">loading</span> = <span class="literal">false</span></span><br><span class="line">        <span class="comment">// 如果加载完成后，需要告诉list组件</span></span><br><span class="line">        <span class="keyword">if</span> (<span class="variable language_">this</span>.<span class="property">list</span>.<span class="property">length</span> &gt;= <span class="number">50</span>) &#123;</span><br><span class="line">          <span class="comment">// 加载结束(不改成true 加载不会结束 会一直加载)</span></span><br><span class="line">          <span class="variable language_">this</span>.<span class="property">finished</span> = <span class="literal">true</span></span><br><span class="line">        &#125;</span><br><span class="line">+       <span class="comment">// 再设置回false 让其下次可以触发方法  </span></span><br><span class="line">+         <span class="variable language_">this</span>.<span class="property">throttle</span> = <span class="literal">false</span></span><br><span class="line">      &#125;, <span class="number">1000</span>)</span><br><span class="line">    &#125;</span><br><span class="line">  &#125;</span><br><span class="line">&lt;/script&gt;</span><br></pre></td></tr></table></figure>

<p>总结:</p>
<ol>
<li>在固定的时间内（1秒），无论触发多少次条件（onLoad触发一次），仅仅执行一次任务（加载一页数据）</li>
</ol>
<h2 id="列表文章布局-main-vue"><a href="#列表文章布局-main-vue" class="headerlink" title="列表文章布局  main.vue"></a>列表文章布局  <code>main.vue</code></h2><p><a target="_blank" rel="noopener" href="https://vant-contrib.gitee.io/vant/#/zh-CN/cell">Vant Cell 单元格</a></p>
<p><a target="_blank" rel="noopener" href="https://vant-contrib.gitee.io/vant/#/zh-CN/image">Vant img 图片</a></p>
<blockquote>
<p>目标：实现文章列表基本布局</p>
<p>效果: 按需求 显示图片</p>
</blockquote>
<ul>
<li>页面结构-三张图 </li>
<li>页面结构-一张图</li>
</ul>
<blockquote>
<p>template 模板样式</p>
</blockquote>
<ul>
<li>van-ellipsis vant内置的样式 当文本内容长度超过容器最大宽度时，自动省略多余的文本。</li>
</ul>
<figure class="highlight diff"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br><span class="line">34</span><br><span class="line">35</span><br><span class="line">36</span><br><span class="line">37</span><br><span class="line">38</span><br><span class="line">39</span><br><span class="line">40</span><br><span class="line">41</span><br><span class="line">42</span><br><span class="line">43</span><br><span class="line">44</span><br><span class="line">45</span><br><span class="line">46</span><br><span class="line">47</span><br><span class="line">48</span><br><span class="line">49</span><br><span class="line">50</span><br><span class="line">51</span><br><span class="line">52</span><br><span class="line">53</span><br><span class="line">54</span><br><span class="line">55</span><br><span class="line">56</span><br><span class="line">57</span><br><span class="line">58</span><br><span class="line">59</span><br><span class="line">60</span><br><span class="line">61</span><br><span class="line">62</span><br></pre></td><td class="code"><pre><span class="line">&lt;template&gt;</span><br><span class="line">  &lt;div class=&quot;main&quot;&gt;</span><br><span class="line">    &lt;!-- v-model=&quot;active&quot;是控制默认选择 在data()&#123;&#125;里面控制 --&gt;</span><br><span class="line">    &lt;van-tabs v-model=&quot;active&quot; swipeable&gt;</span><br><span class="line">      &lt;!-- 把用户频道数据 渲染到页面上 --&gt;</span><br><span class="line">      &lt;van-tab :key=&quot;item.id&quot; v-for=&quot;item in channels&quot; :title=&quot;item.name&quot;&gt;</span><br><span class="line">        &lt;div class=&quot;scroll-wrapper&quot;&gt;</span><br><span class="line">          &lt;!-- 添加 上拉菜单刷新 --&gt;</span><br><span class="line">          &lt;!--isLoading 是控制上拉的状态为 布尔控制 --&gt;</span><br><span class="line">          &lt;!-- @refresh是声明上拉方法 --&gt;</span><br><span class="line">          &lt;van-pull-refresh v-model=&quot;isLoading&quot; @refresh=&quot;onRefresh&quot; :success-text=&quot;pullText&quot;&gt;</span><br><span class="line">            &lt;!-- 添加 滑动下拉的数据 --&gt;</span><br><span class="line">            &lt;!-- :finished 是列表加载完成的标志 布尔控制 loading 是下拉状态为 布尔控制  --&gt;</span><br><span class="line">            &lt;!-- @load是声明下拉方法--&gt;</span><br><span class="line">            &lt;van-list v-model=&quot;loading&quot; :finished=&quot;finished&quot; finished-text=&quot;没有更多了&quot; @load=&quot;onLoad&quot;&gt;</span><br><span class="line">              &lt;!-- list是渲染到页面上的内容  --&gt;</span><br><span class="line"><span class="addition">+               &lt;van-cell v-for=&quot;item in list&quot; :key=&quot;item&quot;&gt;</span></span><br><span class="line"><span class="addition">+                &lt;!-- 页面结构-三张图 --&gt;</span></span><br><span class="line"><span class="addition">+                 &lt;div class=&quot;article_item&quot;&gt;</span></span><br><span class="line"><span class="addition">+					&lt;!-- van-ellipsis vant内置的样式 当文本内容长度超过容器最大宽度时，自动省略多余的文本 --&gt;</span></span><br><span class="line"><span class="addition">+                   &lt;h3 class=&quot;van-ellipsis&quot;&gt;PullRefresh下拉刷新PullRefresh下拉刷新下拉刷新下拉刷新&lt;/h3&gt;</span></span><br><span class="line"><span class="addition">+                   &lt;div class=&quot;img_box&quot;&gt;</span></span><br><span class="line"><span class="addition">+                     &lt;van-image class=&quot;w33&quot; fit=&quot;cover&quot; src=&quot;https://img.yzcdn.cn/vant/cat.jpeg&quot; /&gt;</span></span><br><span class="line"><span class="addition">+                     &lt;van-image class=&quot;w33&quot; fit=&quot;cover&quot; src=&quot;https://img.yzcdn.cn/vant/cat.jpeg&quot; /&gt;</span></span><br><span class="line"><span class="addition">+                     &lt;van-image class=&quot;w33&quot; fit=&quot;cover&quot; src=&quot;https://img.yzcdn.cn/vant/cat.jpeg&quot; /&gt;</span></span><br><span class="line"><span class="addition">+                   &lt;/div&gt;</span></span><br><span class="line"><span class="addition">+                   &lt;div class=&quot;info_box&quot;&gt;</span></span><br><span class="line"><span class="addition">+                     &lt;span&gt;你像一阵风&lt;/span&gt;</span></span><br><span class="line"><span class="addition">+                     &lt;span&gt;8评论&lt;/span&gt;</span></span><br><span class="line"><span class="addition">+                     &lt;span&gt;10分钟前&lt;/span&gt;</span></span><br><span class="line"><span class="addition">+                     &lt;span class=&quot;close&quot;&gt;</span></span><br><span class="line"><span class="addition">+                       &lt;van-icon name=&quot;cross&quot;&gt;&lt;/van-icon&gt;</span></span><br><span class="line"><span class="addition">+                     &lt;/span&gt;</span></span><br><span class="line"><span class="addition">+                   &lt;/div&gt;</span></span><br><span class="line"><span class="addition">+                 &lt;/div&gt;</span></span><br><span class="line"><span class="addition">+                 &lt;!-- 页面结构-一张图 --&gt;</span></span><br><span class="line"><span class="addition">+                 &lt;div class=&quot;article_item&quot;&gt;</span></span><br><span class="line"><span class="addition">+                   &lt;h3 class=&quot;van-ellipsis&quot;&gt;PullRefresh下拉刷新PullRefresh下拉刷新下拉刷新下拉刷新&lt;/h3&gt;</span></span><br><span class="line"><span class="addition">+                   &lt;div class=&quot;img_box&quot;&gt;</span></span><br><span class="line"><span class="addition">+                     &lt;van-image class=&quot;w100&quot; fit=&quot;cover&quot; src=&quot;https://img.yzcdn.cn/vant/cat.jpeg&quot; /&gt;</span></span><br><span class="line"><span class="addition">+                   &lt;/div&gt;</span></span><br><span class="line"><span class="addition">+                   &lt;div class=&quot;info_box&quot;&gt;</span></span><br><span class="line"><span class="addition">+                     &lt;span&gt;你像一阵风&lt;/span&gt;</span></span><br><span class="line"><span class="addition">+                     &lt;span&gt;8评论&lt;/span&gt;</span></span><br><span class="line"><span class="addition">+                     &lt;span&gt;10分钟前&lt;/span&gt;</span></span><br><span class="line"><span class="addition">+                     &lt;span class=&quot;close&quot;&gt;</span></span><br><span class="line"><span class="addition">+                       &lt;van-icon name=&quot;cross&quot;&gt;&lt;/van-icon&gt;</span></span><br><span class="line"><span class="addition">+                     &lt;/span&gt;</span></span><br><span class="line"><span class="addition">+                   &lt;/div&gt;</span></span><br><span class="line"><span class="addition">+                 &lt;/div&gt;</span></span><br><span class="line"><span class="addition">+               &lt;/van-cell&gt;</span></span><br><span class="line">            &lt;/van-list&gt;</span><br><span class="line">          &lt;/van-pull-refresh&gt;</span><br><span class="line">        &lt;/div&gt;</span><br><span class="line">      &lt;/van-tab&gt;</span><br><span class="line">    &lt;/van-tabs&gt;</span><br><span class="line">    &lt;span class=&quot;bar_btn&quot;&gt;</span><br><span class="line">      &lt;van-icon name=&quot;wap-nav&quot;&gt;&lt;/van-icon&gt;</span><br><span class="line">    &lt;/span&gt;</span><br><span class="line">  &lt;/div&gt;</span><br><span class="line">&lt;/template&gt;</span><br><span class="line">&lt;script&gt;</span><br></pre></td></tr></table></figure>

<blockquote>
<p>style css样式</p>
</blockquote>
<figure class="highlight less"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br><span class="line">34</span><br><span class="line">35</span><br><span class="line">36</span><br><span class="line">37</span><br><span class="line">38</span><br><span class="line">39</span><br><span class="line">40</span><br></pre></td><td class="code"><pre><span class="line"><span class="selector-class">.article_item</span> &#123;</span><br><span class="line">  <span class="selector-tag">h3</span> &#123;</span><br><span class="line">    <span class="attribute">font-weight</span>: normal;</span><br><span class="line">    <span class="attribute">line-height</span>: <span class="number">2</span>;</span><br><span class="line">  &#125;</span><br><span class="line">  <span class="selector-class">.img_box</span> &#123;</span><br><span class="line">    <span class="attribute">display</span>: flex;</span><br><span class="line">    <span class="attribute">justify-content</span>: space-between;</span><br><span class="line">    <span class="selector-class">.w33</span> &#123;</span><br><span class="line">      <span class="attribute">width</span>: <span class="number">33%</span>;</span><br><span class="line">      <span class="attribute">height</span>: <span class="number">180px</span>;</span><br><span class="line">    &#125;</span><br><span class="line">    <span class="selector-class">.w100</span> &#123;</span><br><span class="line">      <span class="attribute">width</span>: <span class="number">100%</span>;</span><br><span class="line">      <span class="attribute">height</span>: <span class="number">360px</span>;</span><br><span class="line">    &#125;</span><br><span class="line">  &#125;</span><br><span class="line">  <span class="selector-class">.info_box</span> &#123;</span><br><span class="line">    <span class="attribute">color</span>: <span class="number">#999</span>;</span><br><span class="line">    <span class="attribute">line-height</span>: <span class="number">2</span>;</span><br><span class="line">    <span class="attribute">position</span>: relative;</span><br><span class="line">    <span class="attribute">font-size</span>: <span class="number">24px</span>;</span><br><span class="line">    <span class="selector-tag">span</span> &#123;</span><br><span class="line">      <span class="attribute">padding-right</span>: <span class="number">20px</span>;</span><br><span class="line">      <span class="selector-tag">&amp;</span><span class="selector-class">.close</span> &#123;</span><br><span class="line">        <span class="attribute">border</span>: <span class="number">1px</span> solid <span class="number">#ddd</span>;</span><br><span class="line">        <span class="attribute">border-radius</span>: <span class="number">4px</span>;</span><br><span class="line">        <span class="attribute">line-height</span>: <span class="number">30px</span>;</span><br><span class="line">        <span class="attribute">height</span>: <span class="number">24px</span>;</span><br><span class="line">        <span class="attribute">width</span>: <span class="number">32px</span>;</span><br><span class="line">        <span class="attribute">text-align</span>: center;</span><br><span class="line">        <span class="attribute">padding-right</span>: <span class="number">0</span>;</span><br><span class="line">        <span class="attribute">font-size</span>: <span class="number">16px</span>;</span><br><span class="line">        <span class="attribute">position</span>: absolute;</span><br><span class="line">        <span class="attribute">right</span>: <span class="number">0</span>;</span><br><span class="line">        <span class="attribute">top</span>: <span class="number">14px</span>;</span><br><span class="line">      &#125;</span><br><span class="line">    &#125;</span><br><span class="line">  &#125;</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>

<p>总结：</p>
<ol>
<li>数据项分为单张图片和三张图片的效果（由数据决定显示成什么效果）。</li>
<li>van-ellipsis 类由Vant提供，用于实现文本超出后显示省略号。</li>
<li>van-cell插槽的用法要注意（具名插槽）</li>
</ol>
<h2 id="获取频道数据-动态渲染文章列表-测试数据-main-vue"><a href="#获取频道数据-动态渲染文章列表-测试数据-main-vue" class="headerlink" title="获取频道数据 动态渲染文章列表(测试数据) main.vue"></a>获取频道数据 动态渲染文章列表(测试数据) <code>main.vue</code></h2><p>步骤分为: 获取频道数据 —–&gt;  获取频道对应文章(通过时间轴获取)</p>
<blockquote>
<p>目标: 仅仅是测试数据 并没有任何渲染作用</p>
</blockquote>
<h3 id="获取用户的频道数据-api文件夹-下-channel-js"><a href="#获取用户的频道数据-api文件夹-下-channel-js" class="headerlink" title="获取用户的频道数据 api文件夹 下 channel.js"></a>获取用户的频道数据 <code>api文件夹 下 channel.js</code></h3><ul>
<li>目标：调用接口获取频道数据 <code>src/api/channel.js</code></li>
</ul>
<blockquote>
<p>封装调用频道接口业务模块</p>
</blockquote>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">// 获取频道列表数据，用于测试请求拦截器和token有效期</span></span><br><span class="line"><span class="comment">// 导入封装的接口组件</span></span><br><span class="line"><span class="keyword">import</span> request <span class="keyword">from</span> <span class="string">&#x27;../utils/request&#x27;</span></span><br><span class="line"><span class="comment">// ? 获取用户的频道数据(如果没有登录，返回默认的频道数据；如果登录了，就返回该用户自己的数据)</span></span><br><span class="line"><span class="keyword">export</span> <span class="keyword">const</span> <span class="title function_">getAllChannels</span> = (<span class="params"></span>) =&gt; &#123;</span><br><span class="line">  <span class="comment">// ? 携带请求方式 请求地址 获取相应用户的登录频道数据(根据token判断不同用户)</span></span><br><span class="line">  <span class="keyword">return</span> <span class="title function_">request</span>(&#123;</span><br><span class="line">    <span class="attr">method</span>: <span class="string">&#x27;get&#x27;</span>,</span><br><span class="line">    <span class="attr">url</span>: <span class="string">&#x27;v1_0/user/channels&#x27;</span></span><br><span class="line">  &#125;)</span><br><span class="line">&#125;</span><br><span class="line"></span><br></pre></td></tr></table></figure>

<blockquote>
<p>调用频道接口业务模块 <code>main文件夹下的 main.Vue文件</code></p>
</blockquote>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">import</span> &#123; getMyChannels &#125; <span class="keyword">from</span> <span class="string">&#x27;@/api/channel.js&#x27;</span></span><br><span class="line"><span class="attr">methods</span>: &#123;</span><br><span class="line">   <span class="comment">// 获取频道列表</span></span><br><span class="line">   <span class="keyword">async</span> getMyChannels () &#123;</span><br><span class="line">       <span class="keyword">const</span> ret = <span class="keyword">await</span> <span class="title function_">getMyChannels</span>()</span><br><span class="line">       <span class="variable language_">this</span>.<span class="property">channels</span> = ret.<span class="property">data</span>.<span class="property">channels</span></span><br><span class="line">   &#125;</span><br><span class="line">&#125;,</span><br><span class="line">created () &#123;</span><br><span class="line">     <span class="comment">// ! 生命周期 登录获取相应用户数据</span></span><br><span class="line">   <span class="variable language_">this</span>.<span class="title function_">getMyChannels</span>()</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>

<blockquote>
<p>列表数据 储存数据</p>
</blockquote>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">// 储存频道需要的数据</span></span><br><span class="line">data () &#123;</span><br><span class="line">    <span class="keyword">return</span> &#123;</span><br><span class="line"><span class="attr">channels</span>: []</span><br><span class="line">    &#125;</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>

<blockquote>
<p>渲染组件 template模板</p>
</blockquote>
<figure class="highlight plaintext"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">&lt;van-tab :key=&quot;item.id&quot; v-for=&quot;item in channels&quot; :title=&quot;item.name&quot;&gt;</span><br></pre></td></tr></table></figure>

<blockquote>
<p>总结：调用频道接口获取用户相关的频道数据并且进行动态渲染。</p>
</blockquote>
<h2 id="通过时间戳-实现频道数据分页-main-vue"><a href="#通过时间戳-实现频道数据分页-main-vue" class="headerlink" title="通过时间戳 实现频道数据分页 main.vue"></a>通过时间戳 实现频道数据分页 <code>main.vue</code></h2><p><img src="https://jinyanlong-1305883696.cos.ap-hongkong.myqcloud.com/pWP5QXa3rt76BmT.png" alt="image-20210607193133308"></p>
<h3 id="分页频道对应文章数据结构分析"><a href="#分页频道对应文章数据结构分析" class="headerlink" title="分页频道对应文章数据结构分析"></a>分页频道对应文章数据结构分析</h3><blockquote>
<p>目标：熟悉文章和频道数据结构</p>
</blockquote>
<ul>
<li>分析：文章列表与频道关系<ul>
<li>频道数据 需要 设置 关联切换文章列表的数据</li>
</ul>
</li>
</ul>
<p><img src="https://jinyanlong-1305883696.cos.ap-hongkong.myqcloud.com/OieBo3R2HdqT84W.png" alt="image-20210607162140226"></p>
<p><img src="https://jinyanlong-1305883696.cos.ap-hongkong.myqcloud.com/VF2ib1Eefr7AogP.png" alt="image-20210607193916685"></p>
<p>通过三个参数 来实现分页切换:</p>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">// 分页参数 (时间戳)</span></span><br><span class="line"><span class="attr">timestamp</span>: timestamp,</span><br><span class="line"><span class="comment">// 频道id </span></span><br><span class="line"><span class="attr">channel_id</span>: channelId,</span><br><span class="line"><span class="comment">// 是否包含置顶数据</span></span><br><span class="line"><span class="attr">with_top</span>: <span class="number">1</span></span><br></pre></td></tr></table></figure>

<p>基于时间的分页策略</p>
<ul>
<li>前提条件：数据是基于时间排好序的</li>
<li>首次查询，传递当前时间，作为分页参数，后端从这个时间点向后查询固定量的数据，并且获取下一条数据的时间，作为新的时间戳，和数据一块返回给前端</li>
<li>前端获取首页数据后进行渲染，并且用返回的时间戳覆盖当前时间戳</li>
<li>第二次查询时，把上次返回的时间戳作为分页参数，查询下一页数据，</li>
<li>后端采用相似的规则返回数据和新的时间戳</li>
<li>前端同样发送新的时间戳查询分页数据即可，以此类推</li>
</ul>
<h3 id="给频道数据-添加-关联文章列表数据"><a href="#给频道数据-添加-关联文章列表数据" class="headerlink" title="给频道数据 添加 关联文章列表数据"></a>给频道数据 添加 关联文章列表数据</h3><blockquote>
<p>目标: 给频道数据添加获取文章列表数据添加关联性（包括文章加载的状态相关标志位，以及分页相关参数）</p>
<p>需求: 利用<code>map</code>方法 给频道数据添加新的属性名 关联文章列表 实现切换功能</p>
<p>效果: 点击频道列表 按照服务器返回的文章列表显示出来</p>
</blockquote>
<ul>
<li>关联的属性名: id  name loading  isLoading  finished pullText timestamp articles<ul>
<li>利用<code>map</code>方法 给所有的频道数据 添加 新的属性名 来关键 文章列表</li>
</ul>
</li>
</ul>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br></pre></td><td class="code"><pre><span class="line"><span class="attr">methods</span>: &#123;</span><br><span class="line">   <span class="comment">// ! 获取用户的频道数据</span></span><br><span class="line">   <span class="keyword">async</span> getAllChannels () &#123;</span><br><span class="line">     <span class="comment">// ! 调用获取用户频道数据的专用组件</span></span><br><span class="line">     <span class="keyword">const</span> ret = <span class="keyword">await</span> <span class="title function_">getAllChannels</span>()</span><br><span class="line">     <span class="comment">// ! 保存服务器返回的数据</span></span><br><span class="line">     <span class="comment">// ! 利用map方法 给频道数据添加新的属性名 关联文章列表</span></span><br><span class="line">     <span class="variable language_">this</span>.<span class="property">channels</span> = ret.<span class="property">data</span>.<span class="property">channels</span>.<span class="title function_">map</span>(<span class="function"><span class="params">item</span> =&gt;</span> &#123;</span><br><span class="line">       <span class="comment">//! 作为切换的根据 自定义属性名</span></span><br><span class="line">       <span class="keyword">return</span> &#123;</span><br><span class="line">         <span class="comment">// 频道的id</span></span><br><span class="line">         <span class="attr">id</span>: item.<span class="property">id</span>,</span><br><span class="line">         <span class="comment">// 频道的标签名称</span></span><br><span class="line">         <span class="attr">name</span>: item.<span class="property">name</span>,</span><br><span class="line">         <span class="comment">// 文章列表加载状态</span></span><br><span class="line">         <span class="attr">loading</span>: <span class="literal">false</span>,</span><br><span class="line">         <span class="comment">// 下拉刷新的完成状态</span></span><br><span class="line">         <span class="attr">isLoading</span>: <span class="literal">false</span>,</span><br><span class="line">         <span class="comment">// 上拉列表加载完成的标志</span></span><br><span class="line">         <span class="attr">finished</span>: <span class="literal">false</span>,</span><br><span class="line">         <span class="comment">// 下拉刷新完成的提示信息</span></span><br><span class="line">         <span class="attr">pullText</span>: <span class="string">&#x27;加载成功&#x27;</span>,</span><br><span class="line">         <span class="comment">// 时间戳，用于实现列表的分页查询</span></span><br><span class="line">         <span class="attr">timestamp</span>: +<span class="keyword">new</span> <span class="title class_">Date</span>(), <span class="comment">//! 把时间设置为毫秒数 +</span></span><br><span class="line">         <span class="comment">// 文章列表</span></span><br><span class="line">         <span class="attr">articles</span>: []</span><br><span class="line">       &#125;</span><br><span class="line">     &#125;)</span><br><span class="line">   &#125;</span><br></pre></td></tr></table></figure>

<h2 id="频道关联-文章列表-上滑获取数据-下滑刷新数据"><a href="#频道关联-文章列表-上滑获取数据-下滑刷新数据" class="headerlink" title="频道关联 文章列表 上滑获取数据 下滑刷新数据"></a>频道关联 文章列表 上滑获取数据 下滑刷新数据</h2><blockquote>
<p>目标: 实现下滑获取服务器的文章列表 上滑更新服务器最新文章</p>
<p>效果: 下滑获取服务器的文章列表 上滑更新服务器最新文章渲染到页面</p>
<p>创建一个 api 单独配置 频道切换文章 的接口 <code>api文件夹 里面 article.js</code></p>
</blockquote>
<ul>
<li>实现频道切换文章需要的比对数值 设置参数 (左边服务器规定)<ul>
<li>分页参数(时间轴): timestamp: timestamp,</li>
<li>频道id : channel_id: channelId,</li>
</ul>
</li>
</ul>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">// 文章模块</span></span><br><span class="line"><span class="comment">// 导入axios 统一获取方法</span></span><br><span class="line"><span class="keyword">import</span> requset <span class="keyword">from</span> <span class="string">&#x27;../utils/request&#x27;</span></span><br><span class="line"></span><br><span class="line"><span class="comment">// 通过频道关联 实现 比对文章切换属性值 实现切换</span></span><br><span class="line"><span class="comment">// 命名导出 设置分页参数(时间戳) 频道单独id参数</span></span><br><span class="line"><span class="keyword">export</span> <span class="keyword">const</span> <span class="title function_">getArticles</span> = (<span class="params">channelId, timestamp</span>) =&gt; &#123;</span><br><span class="line">  <span class="keyword">return</span> <span class="title function_">requset</span>(&#123;</span><br><span class="line">    <span class="attr">method</span>: <span class="string">&#x27;get&#x27;</span>,</span><br><span class="line">    <span class="attr">url</span>: <span class="string">&#x27;v1_1/articles&#x27;</span>,</span><br><span class="line">    <span class="attr">params</span>: &#123;</span><br><span class="line">      <span class="comment">// 分页参数</span></span><br><span class="line">      <span class="attr">timestamp</span>: timestamp,</span><br><span class="line">      <span class="comment">// 频道id</span></span><br><span class="line">      <span class="attr">channel_id</span>: channelId,</span><br><span class="line">      <span class="comment">// 是否包含置顶数据</span></span><br><span class="line">      <span class="attr">with_top</span>: <span class="number">1</span></span><br><span class="line">    &#125;</span><br><span class="line">  &#125;)</span><br><span class="line">&#125;</span><br><span class="line"></span><br></pre></td></tr></table></figure>

<p>典型的分页场景：</p>
<ul>
<li><p>基于页码（pagenum）和每页条数（pagesize）实现分页，orderName(按照那个字段排序)（表格分页）</p>
</li>
<li><p>基于时间排序：上一次请求返回的结果包括本页数据和下一页数据开始的时间（下拉加载分页场景）</p>
</li>
</ul>
<hr>
<blockquote>
<p>实现 频道关联 动态切换文章列表 下滑获取数据 上拉更新数据 <code>main.vue</code></p>
</blockquote>
<ul>
<li>第一步 先获取 频道数据<ul>
<li>需要单独设置api组件</li>
</ul>
</li>
<li>第二步 频道数据添加关联文章列表根据的属性名(利用 <code>map</code>方法实现添加)</li>
<li>第三步 添加文章列表关联属性名后 和服务器比对 获取相应的数据 (基于接口的实现)<ul>
<li>需要单独设置api组件 </li>
<li><big> 注意:</big> axios获取数据是异步操作 必须要让数据变成同步 实现串联(一环套一环)</li>
</ul>
</li>
<li>第四步 声明 下滑更新 上滑获取数据 (重新调用接口获取最新数据)<ul>
<li>当前时间戳 比对 服务器时间戳 更新 获取最新数据</li>
</ul>
</li>
</ul>
<blockquote>
<p>template 模板</p>
</blockquote>
<ul>
<li><code>@refresh</code>是声明上拉方法 上滑触发刷新时候 执行方法</li>
<li><code>@load</code>是声明下拉获取数据方法 当频道没有数据的时候 执行方法</li>
</ul>
<figure class="highlight plaintext"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br><span class="line">34</span><br><span class="line">35</span><br><span class="line">36</span><br><span class="line">37</span><br><span class="line">38</span><br><span class="line">39</span><br><span class="line">40</span><br><span class="line">41</span><br><span class="line">42</span><br><span class="line">43</span><br><span class="line">44</span><br><span class="line">45</span><br><span class="line">46</span><br><span class="line">47</span><br></pre></td><td class="code"><pre><span class="line">&lt;template&gt;</span><br><span class="line">  &lt;div class=&quot;main&quot;&gt;</span><br><span class="line">    &lt;!-- v-model=&quot;active&quot;是控制默认选择 在data()&#123;&#125;里面控制 --&gt;</span><br><span class="line">    &lt;van-tabs v-model=&quot;active&quot; swipeable&gt;</span><br><span class="line">      &lt;!-- 把用户频道数据 渲染到页面上 --&gt;</span><br><span class="line">      &lt;van-tab :key=&quot;item.id&quot; v-for=&quot;item in channels&quot; :title=&quot;item.name&quot;&gt;</span><br><span class="line">        &lt;div class=&quot;scroll-wrapper&quot;&gt;</span><br><span class="line">          &lt;!-- 添加 上拉菜单刷新 --&gt;</span><br><span class="line">          &lt;!--isLoading 是控制上拉的状态为 布尔控制 --&gt;</span><br><span class="line">          &lt;!-- @refresh是声明上拉刷新数据方法 --&gt;</span><br><span class="line">          &lt;van-pull-refresh v-model=&quot;activeChannel.isLoading&quot; @refresh=&quot;onRefresh&quot; :success-text=&quot;activeChannel.pullText&quot;&gt;</span><br><span class="line">            &lt;!-- 添加 滑动下拉的数据 --&gt;</span><br><span class="line">            &lt;!-- :finished 是列表加载完成的标志 布尔控制 loading 是下拉状态为 布尔控制  --&gt;</span><br><span class="line">            &lt;!-- @load是声明下拉获取数据方法--&gt;</span><br><span class="line">            &lt;van-list v-model=&quot;activeChannel.loading&quot; :finished=&quot;activeChannel.finished&quot; finished-text=&quot;没有更多了&quot; @load=&quot;onLoad&quot;&gt;</span><br><span class="line">              &lt;!-- 把数据渲染到页面上的框架 --&gt;</span><br><span class="line">              &lt;van-cell v-for=&quot;item in activeChannel.articles&quot; :key=&quot;item.art_id&quot;&gt;</span><br><span class="line">                &lt;!-- 把数据渲染到页面上内容 --&gt;</span><br><span class="line">                &lt;div class=&quot;article_item&quot;&gt;</span><br><span class="line">                  &lt;h3 class=&quot;van-ellipsis&quot;&gt;&#123;&#123;item.title&#125;&#125;&lt;/h3&gt;</span><br><span class="line">                  &lt;div class=&quot;img_box&quot;&gt;</span><br><span class="line">                    &lt;!-- 进行判断 如果 数据图片为3张时候 把类名设置为 w33 如果为1张时候 把类名设置为w100 --&gt;</span><br><span class="line">                    &lt;!-- 循环遍历 v-for 获取储存的数组中的数据 --&gt;</span><br><span class="line">                    &lt;van-image lazy-load :class=&#x27;[&#123;w33: item.cover.type === 3&#125;, &#123;w100: item.cover.type === 1&#125;]&#x27; :key=&#x27;index&#x27; v-for=&#x27;(img, index) in item.cover.images&#x27; fit=&quot;cover&quot; :src=&quot;img&quot; /&gt;</span><br><span class="line">                  &lt;/div&gt;</span><br><span class="line">                  &lt;div class=&quot;info_box&quot;&gt;</span><br><span class="line">                    &lt;!-- 通过Vue 方法 循环遍历打印到页面上 --&gt;</span><br><span class="line">                    &lt;span&gt;&#123;&#123;item.aut_name&#125;&#125;&lt;/span&gt;</span><br><span class="line">                    &lt;span&gt;&#123;&#123;item.comm_count&#125;&#125; 评论&lt;/span&gt;</span><br><span class="line">                    &lt;span&gt;&#123;&#123;item.pubdate|formatTime&#125;&#125;&lt;/span&gt;</span><br><span class="line">                    &lt;span class=&quot;close&quot;&gt;</span><br><span class="line">                      &lt;!-- ?设置点击显示弹窗事件 点击后设置为true --&gt;</span><br><span class="line">                      &lt;van-icon name=&quot;cross&quot;&gt;&lt;/van-icon&gt;</span><br><span class="line">                    &lt;/span&gt;</span><br><span class="line">                  &lt;/div&gt;</span><br><span class="line">                &lt;/div&gt;</span><br><span class="line">              &lt;/van-cell&gt;</span><br><span class="line">            &lt;/van-list&gt;</span><br><span class="line">          &lt;/van-pull-refresh&gt;</span><br><span class="line">        &lt;/div&gt;</span><br><span class="line">      &lt;/van-tab&gt;</span><br><span class="line">    &lt;/van-tabs&gt;</span><br><span class="line">    &lt;span class=&quot;bar_btn&quot;&gt;</span><br><span class="line">      &lt;van-icon name=&quot;wap-nav&quot;&gt;&lt;/van-icon&gt;</span><br><span class="line">    &lt;/span&gt;</span><br><span class="line">  &lt;/div&gt;</span><br><span class="line">&lt;/template&gt;</span><br></pre></td></tr></table></figure>

<blockquote>
<p>script 脚本方法</p>
</blockquote>
<p><img src="https://jinyanlong-1305883696.cos.ap-hongkong.myqcloud.com/RnFg5Zrvm4Owfti.png" alt="image-20210609180732538"></p>
<figure class="highlight plaintext"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br><span class="line">34</span><br><span class="line">35</span><br><span class="line">36</span><br><span class="line">37</span><br><span class="line">38</span><br><span class="line">39</span><br><span class="line">40</span><br><span class="line">41</span><br><span class="line">42</span><br><span class="line">43</span><br><span class="line">44</span><br><span class="line">45</span><br><span class="line">46</span><br><span class="line">47</span><br><span class="line">48</span><br><span class="line">49</span><br><span class="line">50</span><br><span class="line">51</span><br><span class="line">52</span><br><span class="line">53</span><br><span class="line">54</span><br><span class="line">55</span><br><span class="line">56</span><br><span class="line">57</span><br><span class="line">58</span><br><span class="line">59</span><br><span class="line">60</span><br><span class="line">61</span><br><span class="line">62</span><br><span class="line">63</span><br><span class="line">64</span><br><span class="line">65</span><br><span class="line">66</span><br><span class="line">67</span><br><span class="line">68</span><br><span class="line">69</span><br><span class="line">70</span><br><span class="line">71</span><br><span class="line">72</span><br><span class="line">73</span><br><span class="line">74</span><br><span class="line">75</span><br><span class="line">76</span><br><span class="line">77</span><br><span class="line">78</span><br><span class="line">79</span><br><span class="line">80</span><br><span class="line">81</span><br><span class="line">82</span><br><span class="line">83</span><br><span class="line">84</span><br><span class="line">85</span><br><span class="line">86</span><br><span class="line">87</span><br><span class="line">88</span><br><span class="line">89</span><br><span class="line">90</span><br><span class="line">91</span><br><span class="line">92</span><br><span class="line">93</span><br><span class="line">94</span><br><span class="line">95</span><br><span class="line">96</span><br><span class="line">97</span><br><span class="line">98</span><br><span class="line">99</span><br><span class="line">100</span><br><span class="line">101</span><br><span class="line">102</span><br><span class="line">103</span><br><span class="line">104</span><br><span class="line">105</span><br><span class="line">106</span><br><span class="line">107</span><br><span class="line">108</span><br><span class="line">109</span><br><span class="line">110</span><br><span class="line">111</span><br><span class="line">112</span><br><span class="line">113</span><br><span class="line">114</span><br><span class="line">115</span><br><span class="line">116</span><br><span class="line">117</span><br><span class="line">118</span><br><span class="line">119</span><br><span class="line">120</span><br><span class="line">121</span><br><span class="line">122</span><br><span class="line">123</span><br><span class="line">124</span><br><span class="line">125</span><br><span class="line">126</span><br><span class="line">127</span><br><span class="line">128</span><br></pre></td><td class="code"><pre><span class="line">&lt;script&gt;</span><br><span class="line">// ? 导入弹窗的组件</span><br><span class="line">import MoreAction from &#x27;../../components/MoreAction&#x27;</span><br><span class="line">// ! 1. 导入不同用户的频道数据</span><br><span class="line">import &#123; getAllChannels &#125; from &#x27;../../api/channel&#x27;</span><br><span class="line">// ! 2. 导入 频道切换文章列表的 api</span><br><span class="line">import &#123; getArticles &#125; from &#x27;../../api/article&#x27;</span><br><span class="line">export default &#123;</span><br><span class="line">  components: &#123;</span><br><span class="line">    MoreAction</span><br><span class="line">  &#125;,</span><br><span class="line">  data () &#123;</span><br><span class="line">    return &#123;</span><br><span class="line">      // 控制Tab当前选中的条目</span><br><span class="line">      active: 0,</span><br><span class="line">      // 列表数据加载过程的状态位(加载的过程 会自动修改为true 但是渲染完毕后 需要手动修改false)</span><br><span class="line">      loading: false,</span><br><span class="line">      // 列表加载完成的标志(加载的结束 设置指定数值 加载到一定数目结束加载 需要手动修改true)</span><br><span class="line">      finished: false,</span><br><span class="line">      // 列表数组</span><br><span class="line">      list: [],</span><br><span class="line">      // 下拉刷新状态位</span><br><span class="line">      isLoading: false,</span><br><span class="line">      // 设置刷新提示</span><br><span class="line">      pullText: &#x27;刷新成功&#x27;,</span><br><span class="line">      // ~ 设置函数节流</span><br><span class="line">      throttle: false,</span><br><span class="line">      // ! 3. 设置一个保存频道数据的数组</span><br><span class="line">      channels: []</span><br><span class="line">    &#125;</span><br><span class="line">  &#125;,</span><br><span class="line">  computed: &#123;</span><br><span class="line">    //! 9. 当前激活的频道（data中添加active索引数据）</span><br><span class="line">    activeChannel () &#123;</span><br><span class="line">      //! 10. 选中哪个channels频道 获取 其匹配的 active的条目</span><br><span class="line">      return this.channels[this.active] //! 获取的是对象格式</span><br><span class="line">    &#125;</span><br><span class="line">  &#125;,</span><br><span class="line">  // ! 11. 生命周期 页面加载时候 添加并获取数据(需要设置)</span><br><span class="line">  async created () &#123;</span><br><span class="line">    // ~ 接口调用是异步的</span><br><span class="line">    // ~ 先要获取频道数据 并且添加频道关联文章列表属性名 再调用频道关联 动态切换文章列表方法</span><br><span class="line">    await this.getAllChannels() //! 获取用户的频道数据并且添加切换根据属性名</span><br><span class="line">  &#125;,</span><br><span class="line">  methods: &#123;</span><br><span class="line">    // ! 4. 获取用户的频道数据并且添加切换文章列表根据的属性名 ----------------------</span><br><span class="line">    async getAllChannels () &#123;</span><br><span class="line">      // ! 5. 调用获取用户频道数据的专用组件</span><br><span class="line">      const ret = await getAllChannels()</span><br><span class="line">      // ! 6. 保存服务器返回的数据</span><br><span class="line">      // ! 7. 利用map方法 给频道数据添加新的属性名 关联文章列表</span><br><span class="line">      this.channels = ret.data.channels.map(item =&gt; &#123;</span><br><span class="line">        //! 8. 作为频道切换的根据 自定义属性名  匹配 列表文章切换属性</span><br><span class="line">        return &#123;</span><br><span class="line">          // ! 频道的id</span><br><span class="line">          id: item.id,</span><br><span class="line">          // ! 频道的标签名称</span><br><span class="line">          name: item.name,</span><br><span class="line">          // ! 文章列表加载状态</span><br><span class="line">          loading: false,</span><br><span class="line">          // ! 下拉刷新的完成状态</span><br><span class="line">          isLoading: false,</span><br><span class="line">          // ! 上拉列表加载完成的标志</span><br><span class="line">          finished: false,</span><br><span class="line">          // ! 下拉刷新完成的提示信息</span><br><span class="line">          pullText: &#x27;加载成功&#x27;,</span><br><span class="line">          // ! 时间戳，用于实现列表的分页查询</span><br><span class="line">          timestamp: +new Date(), //! 把时间设置为毫秒数 +</span><br><span class="line">          // ! 获取文章列表储存</span><br><span class="line">          articles: []</span><br><span class="line">        &#125;</span><br><span class="line">      &#125;)</span><br><span class="line">    &#125;,</span><br><span class="line">    //! 12. 每次触发动态加载一页新的数据（下滑到底部时触发）------------------------</span><br><span class="line">    //! 频道列表关联文章列表切换  并实现下滑获取文章列表</span><br><span class="line">    async onLoad () &#123; //! 14. 需要设置 同步执行处理异步 使用 async await</span><br><span class="line">      //! 13. 获取当前频道信息(map方法已经添加 相关频道信息 实现文章列表关联)</span><br><span class="line">      const channel = this.activeChannel</span><br><span class="line">      //! 14. 与文章列表数据进行比对 实现频道关联 动态切换文章列表 并且获取相应数据</span><br><span class="line">      const ret = await getArticles(channel.id, channel.timestamp)</span><br><span class="line">      //! 15. 把加载的单页数据添加到文章列表的数组中</span><br><span class="line">      channel.articles.push(...ret.data.results)</span><br><span class="line">      //! 16. 通知Vant-list 组件本次数据加载成功(Vant加载数据自动为 true 加载完毕后 手动设置false)</span><br><span class="line">      channel.loading = false</span><br><span class="line">      //! 17. 判断 是否获取完毕数据(通过时间戳 如果 后端不返回时间戳 说明已经获取完毕)</span><br><span class="line">      if (ret.data.pre_timestamp) &#123;</span><br><span class="line">        //! 18. 如果后端返回有时间戳 说明还有数据 继续和后端交互时间戳 实现数据获取</span><br><span class="line">        channel.timestamp = ret.data.pre_timestamp</span><br><span class="line">      &#125; else &#123;</span><br><span class="line">        //! 19. 如果不返回时间戳 说明没有数据 把Vant方法 结束加载 设置为 true 表示加载完成</span><br><span class="line">        channel.finished = true</span><br><span class="line">      &#125;</span><br><span class="line">    &#125;,</span><br><span class="line"></span><br><span class="line">    //! 20. 更新数据 比对当前时间戳 获取更新后的数据 (实现 上滑 更新数据) ---------------------</span><br><span class="line">    async onRefresh () &#123; //! 需要设置 同步执行处理异步 使用 async await</span><br><span class="line">      //! 21. 获取当前频道信息(map方法已经添加 相关频道信息 实现文章列表关联)</span><br><span class="line">      const channel = this.activeChannel</span><br><span class="line">      //! 22. 重置时间戳(获取当前时间戳 比对服务器的时间戳 实现更新)</span><br><span class="line">      channel.timestamp = +new Date()</span><br><span class="line">      //! 23.  与文章列表数据进行比对 实现频道关联 动态切换文章列表 并且获取刷新后相应数据</span><br><span class="line">      const ret = await getArticles(channel.id, channel.timestamp)</span><br><span class="line">      //! 需要把加载最新数据 覆盖当前文章列表 并且获取服务器最新的时间戳 如果没数据 啥也不做</span><br><span class="line">      //! 24. 进行判断 查看服务器是否有更新数据</span><br><span class="line">      if (ret.data.results.length &gt; 0) &#123;</span><br><span class="line">        //! 25. 如果服务器有新的数据 那就覆盖当前储存数据的数组 实现更新</span><br><span class="line">        channel.articles = ret.data.results</span><br><span class="line">        //! 26. 如果服务器返回了时间戳 则替换当前数组的时间戳</span><br><span class="line">        if (ret.data.pre_timestamp) &#123;</span><br><span class="line">          //! 把数组的时间戳 替换为服务器返回的新时间戳</span><br><span class="line">          channel.timestamp = ret.data.pre_timestamp</span><br><span class="line">        &#125;</span><br><span class="line">      &#125; else &#123;</span><br><span class="line">        //! 27. 如果服务器没有更新数据 那么提示用户 没有数据更新 什么也不做</span><br><span class="line">        channel.pullText = &#x27;没有数据更新&#x27;</span><br><span class="line">        //! 重新调用一遍数据 确保数据没有更新</span><br><span class="line">        channel.articles = []</span><br><span class="line">        channel.timestamp = ret.data.pre_timestamp</span><br><span class="line">        this.onLoad()</span><br><span class="line">      &#125;</span><br><span class="line">      //! 28. 数据刷新完毕后 设置加载结束为 false 如果为true 则无法获取下滑刷新的数据</span><br><span class="line">      channel.isLoading = false</span><br><span class="line">      //! 29. 数据更新后 通知Vant-list 组件本次数据加载成功(Vant加载数据自动为 true 加载完毕后 手动设置false)</span><br><span class="line">      channel.finished = false</span><br><span class="line">    &#125;,</span><br><span class="line">    &#125;</span><br><span class="line">    &#125;</span><br><span class="line">&lt;/script&gt;</span><br></pre></td></tr></table></figure>

<p>总结：</p>
<ol>
<li>图片的单张和多张的处理</li>
<li>根据单张和多张分别绑定不同的类名(class绑定的值，对象和数组可以结合使用）</li>
<li>有的第三方图片不允许访问（防盗链），解决方案，在页面中添加如下代码</li>
</ol>
<figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line"><span class="tag">&lt;<span class="name">meta</span> <span class="attr">name</span>=<span class="string">&quot;referrer&quot;</span> <span class="attr">content</span>=<span class="string">&quot;never&quot;</span>&gt;</span></span><br></pre></td></tr></table></figure>

<blockquote>
<p>防盗链：本质就是不告诉服务器，访问的来源是哪里 (添加在<code>index.html</code> 显示页中)</p>
</blockquote>
<h2 id="时间过滤器插件-main-vue"><a href="#时间过滤器插件-main-vue" class="headerlink" title="时间过滤器插件 main.vue"></a>时间过滤器插件 <code>main.vue</code></h2><p><a target="_blank" rel="noopener" href="https://dayjs.fenxianglu.cn/category/plugin.html#%E7%9B%B8%E5%AF%B9%E6%97%B6%E9%97%B4">dayjs的相对时间官网</a></p>
<p><a target="_blank" rel="noopener" href="https://v3.cn.vuejs.org/guide/plugins.html#%E6%8F%92%E4%BB%B6">Vue插件介绍官网</a></p>
<blockquote>
<p>目标：自定义过滤器格式化时间 (相对时间)</p>
<p>效果: 让文章列表显示的时间为相对时间</p>
<p>安装: npm install dayjs –save</p>
</blockquote>
<p>通过 dayjs提供的包 制作时间过滤器插件</p>
<ul>
<li><code>Vue.use()</code>实例化 创建一个过滤器插件 </li>
<li>用到 <code>Vue.use()</code> 都是Vue的插件</li>
<li>本质上是一个对象 对象中需要有一个方法 <code>install</code></li>
</ul>
<blockquote>
<p>在工具文件夹 <code>utils文件夹 里面 plugins.js</code> 创建一个时间过滤器插件<code>filter</code></p>
</blockquote>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">// 自定义Vue插件的文件</span></span><br><span class="line"><span class="comment">// Vue插件就是一个对象 对象中必须包含一个install方法</span></span><br><span class="line"><span class="comment">// 导入时间过滤器的插件</span></span><br><span class="line"><span class="keyword">import</span> dayjs <span class="keyword">from</span> <span class="string">&#x27;dayjs&#x27;</span></span><br><span class="line"><span class="comment">// 导入时间过滤器的 相对时间模板</span></span><br><span class="line"><span class="keyword">import</span> relativeTime <span class="keyword">from</span> <span class="string">&#x27;dayjs/plugin/relativeTime&#x27;</span></span><br><span class="line"><span class="comment">// 导入国际化(中文)</span></span><br><span class="line"><span class="keyword">import</span> <span class="string">&#x27;dayjs/locale/zh-cn&#x27;</span></span><br><span class="line"><span class="comment">// 把 相对时间 和 时间过滤器插件 进行关联</span></span><br><span class="line">dayjs.<span class="title function_">extend</span>(relativeTime)</span><br><span class="line"><span class="comment">// 设置一个时间过滤器</span></span><br><span class="line"><span class="keyword">export</span> <span class="keyword">default</span> &#123;</span><br><span class="line">  install (<span class="title class_">Vue</span>) &#123;</span><br><span class="line">    <span class="comment">// 扩展日期格式化过滤器 添加一个filter过滤器 formatTime是过滤名称</span></span><br><span class="line">    <span class="title class_">Vue</span>.<span class="title function_">filter</span>(<span class="string">&#x27;formatTime&#x27;</span>, <span class="keyword">function</span> (<span class="params">time</span>) &#123;</span><br><span class="line">      <span class="comment">// 基于中文的方式计算time的相对时间</span></span><br><span class="line">      <span class="keyword">return</span> <span class="title function_">dayjs</span>().<span class="title function_">locale</span>(<span class="string">&#x27;zh-cn&#x27;</span>).<span class="title function_">from</span>(time) <span class="comment">// dayjs方法.中文显示.格式化时间</span></span><br><span class="line">    &#125;)</span><br><span class="line">  &#125;</span><br><span class="line">&#125;</span><br><span class="line"></span><br></pre></td></tr></table></figure>

<blockquote>
<p>在项目入口文件 导入制作的时间插件 <code>main.js</code></p>
</blockquote>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">//~ 导入时间过滤器功能</span></span><br><span class="line"><span class="keyword">import</span> time <span class="keyword">from</span> <span class="string">&#x27;./utils/plugins&#x27;</span></span><br><span class="line"><span class="comment">// ~ 导入 自定义事件过滤器</span></span><br><span class="line"><span class="title class_">Vue</span>.<span class="title function_">use</span>(time)</span><br></pre></td></tr></table></figure>

<blockquote>
<p>在需要的Vue文件 使用过滤器 过滤器使用<code>|</code> <code>main.vue</code></p>
</blockquote>
<figure class="highlight plaintext"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">&lt;span&gt;&#123;&#123;item.pubdate|formatTime&#125;&#125;&lt;/span&gt;</span><br></pre></td></tr></table></figure>



<h2 id="图片懒加载-main-vue"><a href="#图片懒加载-main-vue" class="headerlink" title="图片懒加载 main.vue"></a>图片懒加载 <code>main.vue</code></h2><p><a target="_blank" rel="noopener" href="https://vant-contrib.gitee.io/vant/#/zh-CN/image">Vant提供的懒加载 </a></p>
<blockquote>
<p>目标：实现图片懒加载效果（目的是提高性能）</p>
<p>效果：当屏幕中出现图片时，再去发送请求获取图片内容；尚未看到的图片暂时不发请求。</p>
<p>优势: 采用这种机制页面的加载效率比较高</p>
</blockquote>
<p>Vant 提供懒加载插件 如果在Vant模板 <code>&lt;van-image&gt;&lt;/van-image&gt;</code> 使用的图片 引入后 直接在结尾添加 <code>lazy-load</code></p>
<p><van-image lazy-load></van-image></p>
<ul>
<li>vant内置插件导入，实现图片懒加载。<code>入口文件 main.js</code></li>
</ul>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">// 导入Vant 和 图片懒加载</span></span><br><span class="line"><span class="keyword">import</span> <span class="title class_">Vant</span>, &#123; <span class="title class_">Lazyload</span> &#125; <span class="keyword">from</span> <span class="string">&#x27;vant&#x27;</span></span><br></pre></td></tr></table></figure>

<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">// 配置懒加载插件</span></span><br><span class="line"><span class="title class_">Vue</span>.<span class="title function_">use</span>(<span class="title class_">Lazyload</span>)</span><br></pre></td></tr></table></figure>

<figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">&lt;!-- 启用懒加载!  main.vue --&gt;</span></span><br><span class="line"><span class="tag">&lt;<span class="name">van-image</span> <span class="attr">lazy-load</span>&gt;</span><span class="tag">&lt;/<span class="name">van-image</span>&gt;</span></span><br></pre></td></tr></table></figure>








        </div>
        
            <div class="kratos-copyright text-center clearfix">
                <h5>本作品采用 <a rel="license nofollow" target="_blank" href="https://creativecommons.org/licenses/by-sa/4.0/">知识共享署名-相同方式共享 4.0 国际许可协议</a> 进行许可</h5>
            </div>
        
        <footer class="kratos-entry-footer clearfix">
            
                <div class="post-like-donate text-center clearfix" id="post-like-donate">
                
                
                    <a class="share" href="javascript:;"><i class="fa fa-share-alt"></i> 分享</a>
                    <div class="share-wrap" style="display: none;">
    <div class="share-group">
        <a href="javascript:;" class="share-plain qq" onclick="share('qq');" rel="nofollow">
            <div class="icon-wrap">
                <i class="fa fa-qq"></i>
            </div>
        </a>
        <a href="javascript:;" class="share-plain qzone" onclick="share('qzone');" rel="nofollow">
            <div class="icon-wrap">
                <i class="fa fa-star"></i>
            </div>
        </a>
        <a href="javascript:;" class="share-plain weixin pop style-plain" rel="nofollow">
            <div class="icon-wrap">
                <i class="fa fa-weixin"></i>
            </div>
            <div class="share-int">
                <div class="qrcode" id="wechat-qr"></div>
                <p>打开微信“扫一扫”，打开网页后点击屏幕右上角分享按钮</p>
            </div>
        </a>
        <a href="javascript:;" class="share-plain weibo" onclick="share('weibo');" rel="nofollow">
            <div class="icon-wrap">
                <i class="fa fa-weibo"></i>
            </div>
        </a>
        <a href="javascript:;" class="share-plain facebook style-plain" onclick="share('facebook');" rel="nofollow">
            <div class="icon-wrap">
                <i class="fa fa-facebook"></i>
            </div>
        </a>
        <a href="javascript:;" class="share-plain twitter style-plain" onclick="share('twitter');" rel="nofollow">
            <div class="icon-wrap">
                <i class="fa fa-twitter"></i>
            </div>
        </a>
    </div>
    <script type="text/javascript">
        $(()=>{
            new QRCode("wechat-qr", {
                text: "https://cuishikang.gitee.io/2021/06/08/Vue_Mobile_Projects/5_Home/",
                width: 150,
                height: 150,
                correctLevel : QRCode.CorrectLevel.H
            });
        });
        function share(dest) {
            const qqBase        = "https://connect.qq.com/widget/shareqq/index.html?";
            const weiboBase     = "https://service.weibo.com/share/share.php?";
            const qzoneBase     = "https://sns.qzone.qq.com/cgi-bin/qzshare/cgi_qzshare_onekey?";
            const facebookBase  = "https://www.facebook.com/sharer/sharer.php?";
            const twitterBase   = "https://twitter.com/intent/tweet?";
            const hostUrl       = "https://cuishikang.gitee.io/2021/06/08/Vue_Mobile_Projects/5_Home/";
            const title         = "「4. Vue移动端 频道关联文章列表」";
            const excerpt       = `::: tip 介绍
Vue首页布局 频道和列表关联 实现点击切换相应文章:::`;
            let _URL;
            switch (dest) {
                case "qq"       : _URL = qqBase+"url="+hostUrl+"&title="+title+"&desc=&summary="+excerpt+"&site=cxpy";     break;
                case "weibo"    : _URL = weiboBase+"url="+hostUrl+"&title="+title+excerpt;                                 break;
                case "qzone"    : _URL = qzoneBase+"url="+hostUrl+"&title="+title+"&desc=&summary="+excerpt+"&site=cxpy";  break;
                case "facebook" : _URL = facebookBase+"u="+hostUrl;                                                        break;
                case "twitter"  : _URL = twitterBase+"text="+title+excerpt+"&url="+hostUrl;                                break;
            }
            window.open(_URL);
        };
    </script>
</div>
                
                </div>
            
            <div class="footer-tag clearfix">
                <div class="pull-left">
                <i class="fa fa-tags"></i>
                    <a class="tag-none-link" href="/tags/Vant/" rel="tag">Vant</a>, <a class="tag-none-link" href="/tags/Vue/" rel="tag">Vue</a>, <a class="tag-none-link" href="/tags/Vue%E7%A7%BB%E5%8A%A8%E7%AB%AF/" rel="tag">Vue移动端</a>
                </div>
                <div class="pull-date">
                <span>最后编辑：2022-02-19</span>
                </div>
            </div>
        </footer>
    </div>
    
        <nav class="navigation post-navigation clearfix" role="navigation">
            
            <div class="nav-previous clearfix">
                <a title=" 3. Vue移动端 基本登录功能" href="/2021/06/04/Vue_Mobile_Projects/4_login/">&lt; 上一篇</a>
            </div>
            
            
            <div class="nav-next clearfix">
                <a title=" 5. Vue移动端 文章列表更多操作" href="/2021/06/09/Vue_Mobile_Projects/6_moreHome/">下一篇 &gt;</a>
            </div>
            
        </nav>
    
    
</article>

        

            </section>

        

                
            

<section id="kratos-widget-area" class="col-md-4 hidden-xs hidden-sm">
    <!-- 文章和页面根据splitter来分割，没有的话就从头开始设置为sticky -->
    
    
                <aside id="krw-about" class="widget widget-kratos-about clearfix">
    <div class="photo-background"></div>
    <div class="photo-wrapper clearfix">
        <div class="photo-wrapper-tip text-center">
            <img class="about-photo" src="https://gitee.com/cuishikang/tmp/raw/master/img/20220220194141.png" />
        </div>
    </div>
    <div class="textwidget">
        <p class="text-center"></p>
    </div>
    <div class="site-meta">
        <a class="meta-item" href="/archives/">
            <span class="title">
                文章
            </span>
            <span class="count">
                91
            </span>
        </a>
        <a class="meta-item" href="/categories/">
            <span class="title">
                分类
            </span>
            <span class="count">
                13
            </span>
        </a>
        <a class="meta-item" href="/tags/">
            <span class="title">
                标签
            </span>
            <span class="count">
                33
            </span>
        </a>
    </div>
</aside>
            
                    <div class="sticky-area">
                
                
  <aside id="krw-categories" class="widget widget-kratos-categories clearfix">
    <h4 class="widget-title"><i class="fa fa-folder"></i>分类目录</h4>
      <ul class="category-list"><li class="category-list-item"><a class="category-list-link" href="/categories/Css/">Css</a><span class="category-list-count">4</span></li><li class="category-list-item"><a class="category-list-link" href="/categories/JavaScript/">JavaScript</a><span class="category-list-count">15</span></li><li class="category-list-item"><a class="category-list-link" href="/categories/RABC/">RABC</a><span class="category-list-count">2</span></li><li class="category-list-item"><a class="category-list-link" href="/categories/Vscode/">Vscode</a><span class="category-list-count">1</span></li><li class="category-list-item"><a class="category-list-link" href="/categories/Vue/">Vue</a><span class="category-list-count">13</span></li><li class="category-list-item"><a class="category-list-link" href="/categories/Vue3/">Vue3</a><span class="category-list-count">25</span></li><li class="category-list-item"><a class="category-list-link" href="/categories/Vue%E7%A7%BB%E5%8A%A8%E5%A4%B4%E6%9D%A1%E9%A1%B9%E7%9B%AE/">Vue移动头条项目</a><span class="category-list-count">10</span></li><li class="category-list-item"><a class="category-list-link" href="/categories/animation/">animation</a><span class="category-list-count">4</span></li><li class="category-list-item"><a class="category-list-link" href="/categories/axios/">axios</a><span class="category-list-count">7</span></li><li class="category-list-item"><a class="category-list-link" href="/categories/other/">other</a><span class="category-list-count">2</span></li><li class="category-list-item"><a class="category-list-link" href="/categories/uniapp/">uniapp</a><span class="category-list-count">3</span></li><li class="category-list-item"><a class="category-list-link" href="/categories/vue-element-admin/">vue-element-admin</a><span class="category-list-count">2</span></li><li class="category-list-item"><a class="category-list-link" href="/categories/%E5%B0%8F%E7%A8%8B%E5%BA%8F/">小程序</a><span class="category-list-count">2</span></li></ul>
  </aside>


            
                
  <aside id="krw-tags" class="widget widget-kratos-tags clearfix">
    <h4 class="widget-title"><i class="fa fa-tags"></i>标签聚合</h4>
      <div class="tag-clouds">
        <a href="/tags/Css/" style="font-size: 0.66em;">Css</a> <a href="/tags/H5Video/" style="font-size: 0.6em;">H5Video</a> <a href="/tags/JavaScript/" style="font-size: 0.74em;">JavaScript</a> <a href="/tags/My-project/" style="font-size: 0.6em;">My project</a> <a href="/tags/QQ/" style="font-size: 0.6em;">QQ</a> <a href="/tags/RABC/" style="font-size: 0.6em;">RABC</a> <a href="/tags/Vant/" style="font-size: 0.71em;">Vant</a> <a href="/tags/VeeValidate/" style="font-size: 0.6em;">VeeValidate</a> <a href="/tags/Vscode/" style="font-size: 0.6em;">Vscode</a> <a href="/tags/Vue/" style="font-size: 0.8em;">Vue</a> <a href="/tags/Vue-Router/" style="font-size: 0.6em;">Vue Router</a> <a href="/tags/Vue3/" style="font-size: 0.77em;">Vue3</a> <a href="/tags/Vuex/" style="font-size: 0.6em;">Vuex</a> <a href="/tags/Vue%E7%A7%BB%E5%8A%A8%E7%AB%AF/" style="font-size: 0.74em;">Vue移动端</a> <a href="/tags/Windows/" style="font-size: 0.6em;">Windows</a> <a href="/tags/animation/" style="font-size: 0.63em;">animation</a> <a href="/tags/axios/" style="font-size: 0.69em;">axios</a> <a href="/tags/echarts/" style="font-size: 0.6em;">echarts</a>
      </div>
  </aside>

            
                
  <aside id="krw-posts" class="widget widget-kratos-posts">
  <h4 class="widget-title"><i class="fa fa-file"></i>最新文章</h4>
  <div class="tab-content">
      <ul class="list-group">
        
        
          
          
            <a class="list-group-item" href="/2111/02/19/JavaScript/5_algorithm_tree/"><i class="fa  fa-book"></i> JavaScript树形数据转换算法</a>
            
          
        
          
          
            <a class="list-group-item" href="/2099/01/27/Vue3/1.1.1_Vue_study/"><i class="fa  fa-book"></i> Vue3 学习手册(博客版)</a>
            
          
        
          
          
            <a class="list-group-item" href="/2022/02/28/JavaScript/0.2_scroll/"><i class="fa  fa-book"></i> JS 滚动到指定位置和回到顶部</a>
            
          
        
          
          
            <a class="list-group-item" href="/2022/02/23/Vue/5_Vue_nextTick/"><i class="fa  fa-book"></i> 理解$nextTick</a>
            
          
        
          
          
            <a class="list-group-item" href="/2022/02/20/hello-world/"><i class="fa  fa-book"></i> Hello World</a>
            
          
        
          
            
          
            
          
            
          
            
          
            
          
            
          
            
          
            
          
            
          
            
          
            
          
            
          
            
          
            
          
            
          
            
          
            
          
            
          
            
          
            
          
            
          
            
          
            
          
            
          
            
          
            
          
            
          
            
          
            
          
            
          
            
          
            
          
            
          
            
          
            
          
            
          
            
          
            
          
            
          
            
          
            
          
            
          
            
          
            
          
            
          
            
          
            
          
            
          
            
          
            
          
            
          
            
          
            
          
            
          
            
          
            
          
            
          
            
          
            
          
            
          
            
          
            
          
            
          
            
          
            
          
            
          
            
          
            
          
            
          
            
          
            
          
            
          
            
          
            
          
            
          
            
          
            
          
            
          
            
          
            
          
            
          
            
          
            
          
            
          
            
          
            
      </ul>
  </div>
  </aside>

            
    </div>
</section>
        
        </div>
    </div>
</div>
<footer>
    <div id="footer"  class="ap-lrc"  >
        <div class="container">
            <div class="row">
                <div class="col-md-6 col-md-offset-3 footer-list text-center">
                    <ul class="kratos-social-icons">
                        
                        
                        <li><a target="_blank" rel="nofollow" href="https://t.me/CandyUnion"><i class="fa fa-telegram"></i></a></li>
                        
                        
                        
                        <li><a target="_blank" rel="me" href="https://nya.one/@Candinya"><i class="fa fa fa-share-alt-square"></i></a></li>
                        <li><a target="_blank" rel="nofollow" href="https://github.com/Candinya"><i class="fa fa-github"></i></a></li>
                        
                    </ul>
                    <ul class="kratos-copyright">
                        <div>
                            <li>&copy; 2022 小崔的博客 版权所有.</li>
                            <li>本站已运行<span id="span_dt">Loading...</span></li>
                        </div>
                        <div>
                            <li>Theme <a href="https://github.com/Candinya/Kratos-Rebirth" target="_blank">Kratos:Rebirth</a></li>
                            <li>Site built with&nbsp;<i class="fa fa-heart throb" style="color:#d43f57"></i>&nbsp;by cuishikang.</li>
                        </div>
                        <div>
                            <li>Powered by <a href="https://hexo.io" target="_blank" rel="nofollow">Hexo</a></li>
                            <li>Hosted on <a href="https://github.io" target="_blank">Github Pages</a></li>
                        </div>
                        <div>
                            
                            
                        </div>
                    </ul>
                </div>
            </div>
        </div>
        <div class="kr-tool text-center">
            <div class="tool">
                
                    <div class="box search-box">
                        <a href="/search/">
                            <span class="fa fa-search"></span>
                        </a>
                    </div>
                
                
                    <div class="box theme-box" id="darkmode-switch">
                        <span class="fa fa-adjust"></span>
                    </div>
                
                
            </div>
            <div class="box gotop-box">
                <span class="fa fa-chevron-up"></span>
            </div>
        </div>
    </div>
</footer>
</div>
</div>

        <script defer src="https://unpkg.com/bootstrap@3.3.4/dist/js/bootstrap.min.js"></script>
<script defer src="https://unpkg.com/nprogress@0.2.0/nprogress.js"></script>
<script>
    if (!window.kr) {
        window.kr = {};
    }
    window.kr.notMobile = (!(navigator.userAgent.match(/(phone|pad|pod|iPhone|iPod|ios|iPad|Android|Mobile|BlackBerry|IEMobile|MQQBrowser|JUC|Fennec|wOSBrowser|BrowserNG|WebOS|Symbian|Windows Phone)/i)));
    window.kr.siteRoot = "/";
</script>


    <script async src="/js/candy.min.js"></script>



    <script defer src="https://unpkg.com/aplayer@1.10.1/dist/APlayer.min.js"></script>
    
    <script defer src="https://unpkg.com/meting@2/dist/Meting.min.js"></script>
    <meting-js
        server="netease"
        type="song"
        id="1375305989"
        order="random"
        fixed="true"
    >
    </meting-js>



    <script defer src="https://unpkg.com/@fancyapps/fancybox@3.5.7/dist/jquery.fancybox.min.js"></script>

<script defer src="https://unpkg.com/clipboard@2.0.6/dist/clipboard.min.js"></script>
<script defer src="/js/kratosr.min.js"></script>
<script defer src="/js/pjax.min.js"></script>


    <script defer src="/js/kr-dark.min.js"></script>



<!-- Extra support for third-party plguins  -->


    </body>
</html>